<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="box">121</div>
    <script>
        var oBox = document.querySelector(".box");
        var oUl = document.querySelector("ul");

        // cloneNode() 不传参数 浅复制/只复制标签不复制内容 
        // cloneNode(true) 传入参数 'true' 深复制 即复制标签和内容包括子元素内容
        // jq clone() 和 js cloneNode() 区别：jq会把克隆元素的事件一起克隆 
        var cBox = oBox.cloneNode(true);
        document.body.insertBefore(cBox, oUl);


        // document.onclick = function() {
        //     //前进 去往下以页面
        //     // history.forward();

        //     // 回退 返回上一页面
        //     // history.back();

        //     // history.go(num) 向前或后退
        //     // history.go(-2);

        //     // 查看历史记录 有几条 length
        //     // console.log(history.length);


        //     console.log(navigator.userAgent);
        // }
    </script>
</body>

</html>